
import React from 'react';
import { Form } from "antd";
import * as THREE from 'three';
import Vector3Input from "components/Vector3Input";

/** 物体的局部旋转，以弧度来表示。 */
export default function Rotation(props: { object3D: THREE.Object3D<THREE.Event> }) {

    const { object3D } = props;

    const [rotation, setRotation] = React.useState(new THREE.Vector3(object3D.rotation.x, object3D.rotation.y, object3D.rotation.z))

    const onChangeRotation = React.useCallback((e: THREE.Vector3) => {
        if (!object3D) return;
        object3D.rotation.set(e.x, e.y, e.z);
    }, [object3D])

    React.useEffect(() => {
        const t = setInterval(() => {
            if (!object3D) return;
            if (object3D.rotation.x !== rotation.x || object3D.rotation.y !== rotation.y || object3D.rotation.z !== rotation.z) {
                setRotation(new THREE.Vector3(object3D.rotation.x, object3D.rotation.y, object3D.rotation.z))
            }
        }, 30);
        return () => {
            clearInterval(t);
        }
    }, [object3D, rotation.x, rotation.y, rotation.z])

    return (
        <Form.Item label='旋转' tooltip='物体的局部旋转，以弧度来表示。 ' >
            <Vector3Input
                value={rotation}
                onChange={onChangeRotation}
            />
        </Form.Item>
    )
}